<template>
  <div class="messageList">
    <a-spin :spinning="spinning">
      <div>
        <div style="margin-top: 30px;width:100%;">
          <span class="ConsultationListTitleTitle">技术咨询</span>
          <a-button type="primary" style="margin-right: 20px;float:right" @click="toadd">发帖</a-button>
        </div>
        <br />
        <div>
          <div class="tableClass1">
            <a-table
              class="tableClass"
              :showHeader="false"
              :columns="columns"
              :dataSource="Consultationarr"
              :pagination="false"
              :rowKey="record => record.ctime"
              :customRow="RowClick"
              size="middle"
              :rowClassName="rowClassName"
            >
              <span slot="head" slot-scope="record">
                <div style="color:#52506b;cursor: pointer;font-size:17px">{{record.head}}</div>

                <div class="recorddata">
                  <div style="color:#98989e;font-size:15px">{{record.content | ellipsis}}</div>
                  <div v-if="record.arr">
                    <div class="recordimg" v-for="(item, index) in record.arr" :key="index">
                      <img
                        style="width:100px;height:100px;"
                        :src="'/file/file/download/' + record.arr[index]"
                        @click="imgClick"
                        alt
                      />
                    </div>
                  </div>
                </div>
                <!-- <a-modal class="modalClass" :visible="visible" @cancel="handleCancel" :footer=null>
          <img class="imgClass" :src="imageSrc" alt="">
                </a-modal>-->
              </span>
              <span slot="data" slot-scope="record">
                <div style="color:#b2b2b2;font-size:13px">{{record.ctime}}</div>
              </span>
            </a-table>
          </div>
          <a-pagination
            v-if="page1>7"
            @change="onPageChange"
            :current="pagination.current"
            :total="pagination.total"
            :pageSize="query.pageSize"
            style="margin-top: 10px;text-align: center"
          />
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
const columns = [
  {
    title: "图片",
    scopedSlots: { customRender: "transCode" },
    width: "2%",
    align: "center"
  },
  { title: "内容", scopedSlots: { customRender: "head" }, width: "73%" },
  {
    title: "时间",
    scopedSlots: { customRender: "data" },
    width: "20%",
    align: "right"
  }
];
const data = [{}];
import api from "@/common/api";
import { parse } from "path";
export default {
  data() {
    return {
      data,
      columns,
      show: false,
      spinning: true,
      visible: false,
      imageSrc: "",
      list: {},

      Consultationarr: [],

      pagination: { current: null, total: null },
      upId: [],

      query: {
        page: 1,
        pageSize: 7,
        data: { type: "technology" }
      },
      page1: ""
    };
  },
  filters: {
    ellipsis(value) {
      let len = value.length;
      if (!value) return "";
      if (value.length > 30) {
        return value.substring(0, 30) + "……";
      }
      return value;
    }
  },

  mounted() {
    //  this.getMessageList();
  },
  created() {
    this.getMessageList();
  },
  activated() {
    this.getMessageList();
  },
  methods: {
    imgClick(e) {
      // console.log(e.target.currentSrc)
      this.imageSrc = e.target.currentSrc;
      this.visible = true;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    RowClick(record, index) {
      return {
        on: {
          click: () => {
            // console.log(index)
            // console.log(record)
            this.$router.push({
              path: "ConsultationDetail1",
              query: { id: record.id }
            });
          }
        }
      };
    },
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);

      this.query.page = page;
      this.query.pageSize = pageSize;
      this.getMessageList();
    },
    getMessageList() {
      // console.log("咨询列表");
      this.$axios.post("chatRoom/selectChatRoom", this.query).then(res => {
        console.log("咨询列表", res);
        if (res.data.code == "OK") {
          this.spinning = false;
        }
        this.page1 = res.data.total;
        this.Consultationarr = res.data.list;
        this.pagination.current = res.data.current;
        this.pagination.total = res.data.total;
        this.upId = [];

        this.Consultationarr.forEach((item, index) => {
          this.upId.push(item.id);
        });
      });

      // api.messList(
      //   this.query,
      //   res => {
      //     if (res.data.code == "OK") {
      //       this.arr = res.data.list;
      //       this.pagination.current = res.data.current;
      //       this.pagination.total = res.data.total;
      //       this.upId = [];
      //       this.show = res.statusCount;
      //       this.arr.forEach((item, index) => {
      //         this.upId.push(item.id);
      //       });
      //     }
      //   },
      //   err => {}
      // );
    },

    rowClassName(record, index) {
      let className = "bg_white";
      if (index % 2 === 1) className = "dark-row";
      return className;
    },
    toadd() {
      this.$router.push({ path: "/ConsultationAdd1" });
    }
  }
};
</script>
<style scoped>
.ConsultationListTitleTitle {
  font-size: 20px;
  margin: 26px;
  color: #52506b;
}
.messageList {
  padding: 50px;
}

.bg_white {
  background: #fff;
}

.dark-row {
  background: #f7f9fc;
}

.ant-table-tbody > tr > td {
  border: none;
}

.tableClass {
  border-top: 1px solid #e8e8e8;
  cursor: pointer;
  overflow-y: auto;
}
.tableClass1 {
  height: 60vh;
  overflow-y: auto;
}

.icon_title {
  /* font-size: 18px; */
  width: 19px;
  margin-right: 20px;
}

.actionTab {
  font-size: 16px;
  color: #52506b;
}

.ant-tabs-bar {
  margin: 0 !important;
  border-bottom: none !important;
}

.recordimg {
  background: url("../../../static/img/Replaceimg.png");
  /* border: 1px solid #b2b2b2; */
  margin-left: 10px;
  overflow: hidden;
  width: 100px;
  height: 100px;
  float: left;
}
.recorddata {
  display: flex;
  align-items: center;
}
/*滚动条样式*/
.tableClass1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.tableClass1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.tableClass1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>